<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="getList"
    />
    <common-table
      ref="table"
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <template #operation="scope">
        <el-button
          v-throttle
          :size="size"
          type="text"
          icon="el-icon-edit-outline"
          @click.stop="handleEditTable(scope.row)"
        >编辑</el-button>
        <el-button
          type="text"
          :size="size"
          icon="el-icon-view"
          class="success-btn"
          @click="handlePreview(scope.row)"
        >预览</el-button><br>
        <el-button
          type="text"
          :size="size"
          icon="el-icon-download"
          class="warning-btn"
          @click="handleGenTable(scope.row)"
        >生成代码</el-button>
      </template>
    </common-table>
    <preview ref="preview" />
    <el-dialog
      v-drag
      title="全局配置"
      :visible.sync="globalDialogVisible"
      width="1200px"
    >
      <config-form
        v-if="globalDialogVisible"
        @submit="closeGlobalConfig"
        @reset="closeGlobalConfig"
      />
    </el-dialog>
  </div>
</template>

<script>
import preview from './components/preview'
import configForm from './config/config-form.vue'
import { openPage } from '@/utils'
import { generateCode } from '@/api/dev/gen'
import { mixin } from '@/views/pages/mixin'
export default {
  name: 'Gen',
  components: { preview, configForm },
  mixins: [mixin],
  data() {
    return {
      globalDialogVisible: false, // 全局配置弹窗
      globalConfig: {}, // 全局参数配置
      tableNames: [], // 选中列table名称集合
      // 顶部数组
      options: [{
        type: 'button',
        icon: 'el-icon-refresh',
        handler: 'handlerRefresh',
        float: 'left',
        class: 'refreshBtn',
        text: '刷新'
      },
      {
        type: 'button',
        icon: 'el-icon-tickets',
        handler: 'showGlobalConfig',
        float: 'left',
        btnType: 'primary',
        text: '全局配置'
      },
      {
        type: 'button',
        disabled: true,
        icon: 'el-icon-refresh',
        handler: 'handleReset',
        float: 'left',
        btnType: 'info',
        text: '重置配置'
      },
      {
        type: 'button',
        icon: 'el-icon-download',
        handler: 'handleGenTable',
        float: 'left',
        btnType: 'warning',
        disabled: true,
        text: '生成'
      },
      {
        type: 'button',
        handler: 'handlerReset',
        float: 'right',
        class: 'infoBtn',
        text: '重置'
      },
      {
        type: 'button',
        handler: 'handlerQuery',
        float: 'right',
        text: '查询',
        btnType: 'primary'
      },
      {
        type: 'search',
        bindValue: '',
        float: 'right',
        label: 'keyword',
        handler: 'handlerQuery',
        placeholder: '输入关键字搜索'
      }
      ],
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'tableName',
          label: '表名称'
        },
        {
          prop: 'comment',
          label: '表备注'
        },
        {
          prop: 'tableRows',
          label: '表数据行数'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
        {
          prop: 'updateTime',
          label: '修改时间'
        },
        {
          type: 'slot',
          prop: 'operation',
          label: '操作',
          width: '168',
          slotType: 'operation',
          align: 'center',
          fixed: 'right'
        }
      ]
    }
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.$refs.refTable.doLayout()
    })
  },
  methods: {
    // 重置配置
    handleReset(row) {
      let tableNames = []
      if (row) {
        tableNames = [row.tableName]
      } else {
        tableNames = this.selection.map(item => item.tableName)
      }
      if (tableNames.length === 0) {
        this.$message.error('请选择需要重置的配置')
        return
      }
      this.$confirm('此操作将重置选中列的配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.funs['batchDel'](tableNames).then(() => {
          this.$message({ type: 'success', message: '重置成功!' })
          this.getList()
          if (this.tableNames.length) this.disabled = false
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    },
    // 生成代码
    handleGenTable(row) {
      let tableNames = []
      if (row) {
        tableNames = [row.tableName]
      } else {
        tableNames = this.selection.map(item => item.tableName)
      }
      if (tableNames.length === 0) {
        this.$message.error('请选择需要生成的表')
        return
      }
      generateCode(tableNames).then(response => {
        const contentDisposition = response.headers['content-disposition']
        const filename = contentDisposition.substring(contentDisposition.indexOf('=') + 1)
        this.$download(response.data, filename)
        this.$message.success('代码生成成功!')
      })
    },
    // 全局配置
    showGlobalConfig() {
      this.globalDialogVisible = true
    },
    // 关闭全局配置弹窗
    closeGlobalConfig() {
      this.globalDialogVisible = false
    },
    // 编辑
    handleEditTable(row) {
      openPage(row.tableName + '参数配置', '/dev/gen/config/' + row.tableName)
    },
    // 预览
    handlePreview(e) {
      this.$refs.preview.openDialog(e.tableName)
    }
  }
}
</script>
<style scoped>
::v-deep .el-dialog .el-dialog__body .el-form-item {
  margin-bottom: 20px !important;
}
</style>
